<template>
  <div class="pad-20" v-loading="fullLoading" element-loading-text="加载中">
    <el-row>
      <!-- 左侧信息 -->
      <el-col :span="12">
        <table class="base-info"> 
          <tr>
            <td class="left">关联订单号：</td>
            <td class="right">
              <span>{{ orderPackage.orderNo }}</span>
            </td>
          </tr>
          <tr>
            <td class="left">关联出库单：</td>
            <td class="right">
              <span>{{ orderPackage.stockOutNo }}</span>
            </td>
          </tr>
          <tr>
            <td class="left">仓库：</td>
            <td class="right">
              <span>{{ orderPackage.warehouseName }}</span>
            </td>
          </tr>
          <tr>
            <td class="left">包裹尺寸：</td>
            <td class="right">
              <span v-if="orderPackage.packageLength && orderPackage.packageWidth && orderPackage.packageHeight">
                {{ (orderPackage.packageLength||'') + 'x' + (orderPackage.packageWidth||'') + 'x' + (orderPackage.packageHeight||'') }}
              </span>
            </td>
          </tr>
          <tr>
            <td class="left">包裹体积：</td>
            <td class="right">
              <span v-if="orderPackage.packageSize">{{ orderPackage.packageSize }}升</span>
            </td>
          </tr>
          <tr>
            <td class="left">包裹重量：</td>
            <td class="right">
              <span v-if="orderPackage.packageWeight">{{ orderPackage.packageWeight }}kg</span>
            </td>
          </tr>
        </table>
      </el-col>

      <!-- 右侧信息 -->
      <el-col :span="12">
        <table class="base-info">
          <tr>
            <td class="left">收货人姓名：</td>
            <td class="right">
              <span>{{ orderPackage.projectOrder.customerNickname }}</span>
              <template v-if="orderPackage.projectOrder.encryptReceiveFlag == 1">
                <el-tooltip class="item" effect="dark" content="点击查看收货信息" placement="top-start">
                  <img :src="isLock ? lockIcon : unlockIcon" class="width-24 cursor-p mar-l-20" @click="doDecrypt(0)">
                </el-tooltip>
              </template>
            </td>
          </tr>
          <tr>
            <td class="left">收货人电话：</td>
            <td class="right">
              <span>{{ orderPackage.projectOrder.customerPhone }}</span>
            </td>
          </tr>
          <tr>
            <td class="left">收货人地址：</td>
            <td class="right">
              <span>{{ orderPackage.projectOrder.customerFullAddress }}</span>
            </td>
          </tr>
          <tr>
            <td class="left">快递公司：</td>
            <td class="right">
              <span>{{ orderPackage.enterpriseExpressName }}</span>
            </td>
          </tr>
          <tr>
            <td class="left">运单号：</td>
            <td class="right">
              <span>{{ orderPackage.trackingNo }}</span>
              <a href="javascript:;" v-if="orderPackage.trackingNo" @click="doCopy(orderPackage.trackingNo, $event)"><span class="mar-l-10 font-blue">复制</span></a>
            </td>
          </tr>
        </table>
      </el-col>
    </el-row>

    <!-- 商品信息 -->
    <div class="mar-t-20">
      <el-table :data="orderPackage.packageGoodsList" height="400">
        <el-table-column min-width="260px" label="商品" prop="goodsTitle">
          <template slot-scope="scope">
            <div class="flex">
              <label v-if="scope.row.goodsImageUrl"><img :src="scope.row.goodsImageUrl" class="t-goods-pic"></label>
              <div class="pad-l-10">
                <div class="line-2">{{ scope.row.goodsTitle }}</div>
                <br>
                <div v-if="scope.row.goodsBarCode">条码：{{ scope.row.goodsBarCode }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column width="180px" label="规格描述" prop="skuDetail" align="center">
          <template slot-scope="scope">
            <div class="font-blue">
              {{ scope.row.skuDetail ? scope.row.skuDetail : '无' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column width="100px" label="数量" prop="goodsNum" align="center">
        </el-table-column>
        <el-table-column width="100px" label="单价" prop="goodsPrice" align="center">
          <template slot-scope="scope">
            <div>￥{{ scope.row.goodsPrice }}</div>
          </template>
        </el-table-column>
        <el-table-column width="120px" label="金额" prop="goodsAmount" align="center">
          <template slot-scope="scope">
            <div>￥{{ scope.row.goodsAmount }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import { getOrderPackage } from '@/api/order/orderPackage'
  import { decryptReceiveInfo } from '@/api/goods/thirdOrder'
  import clipboard from '@/utils/clipboard'
  import unlockIcon from '@/assets/images/unlock-icon.png'
  import lockIcon from '@/assets/images/lock-icon.png'

  export default {
    props: {
      showFlag: {
        type: Boolean,
        default() {
          return false
        }
      },
      // 包裹单id
      orderPackageId: {
        type: String
      }
    },
    watch: {
      showFlag(val) {
        if (val) {
          this.init()
        }
      }
    },
    data() {
      return {
        // 包裹单
        orderPackage: {
          orderPackageId: '',
          projectOrder: {}
        },
        // 锁图标
        lockIcon,
        unlockIcon,
        // 锁标识
        isLock: false,
        fullLoading: false
      }
    },
    created() {
      this.init()
    },
    methods: {
      // 复制事件
      doCopy(text, event) {
        clipboard(text, event)
      },
      // 初始化
      init() {
        this.fullLoading = true
        getOrderPackage(this.orderPackageId).then(response => {
          this.fullLoading = false
          if (response.isError) return
          this.orderPackage = response.data
          this.isLock = this.orderPackage.projectOrder.encryptReceiveFlag === 1
        })
      },
      // 解密事件
      doDecrypt(decryptReportType) {
        if (!this.isLock) {
          // 不再解密
          return
        }
        this.fullLoading = true
        decryptReceiveInfo(this.orderPackage.projectOrder.externalOrderNo, this.orderPackage.projectOrder.externalPlatformType, decryptReportType).then(response => {
          this.fullLoading = false
          if (response.isError) return
          this.isLock = false
          const data = response.data
          this.orderPackage.projectOrder.customerNickname = data.customerName
          this.orderPackage.projectOrder.customerPhone = data.customerPhone
          this.orderPackage.projectOrder.customerFullAddress = data.consigneeDetailAddress
        })
      },
      // 返回事件
      doBack() {
        this.$router.go(-1)
      }
    }
  }
</script>

<style lang="less" scoped>
  .base-info {
    width: 100%;
    line-height: 30px;
    .left {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
